<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%--created by zhangyanlei on 2017年8月10日--%>

<!DOCTYPE html>
<html>
	<head>
	<base href="${BaseContext }">
		<meta charset="UTF-8">
		<title>js/jquery专项</title>
	<link rel="stylesheet" href="static/css/amazeui.min.css">
   <link rel="stylesheet" href="static/css/app.css">
		
	</head>
	<body>
		<div class="am-container dataDiv">
			<section class="am-panel am-panel-primary">
			  <header class="am-panel-hd">
			    <h3 class="am-panel-title">考试功能演示</h3>
			  </header>
			  <div class="am-panel-bd">
					<table class="am-table am-table-bordered am-text-center">
						<thead>
							<tr>
								<th colspan="3">
									<button title="点击此按钮刷新下方表格数据，ajax处理" id="shuanxin" class="am-btn am-btn-primary">刷新数据</button>
								</th>
							</tr>
							
						</thead>
						<tbody>
						<form action="user/submitB.do" id="loginForm" method="post">
						<c:forEach items="${userModels }" var="u" varStatus="index">
							<tr>
								<td><input type="checkbox" name="checkid" value="${u.id }"></td>
								<td>${u.name }</td>
								<td>${u.age }岁</td>
							</tr>
							</c:forEach>
							
							</form>
							<tr>
								
								<td colspan="3">
									<button type="button" class="am-btn am-btn-primary" id="quanxuan" title="点击后将所有数据的checkbox修改为选中状态">全选</button>
									<button type="button" class="am-btn am-btn-primary" id="buxuan" title="点击后将所有数据的checkbox修改为未选中状态">全不选</button>
									<button type="button" class="am-btn am-btn-primary" id="fanxuan" title="点击后，已选择的checkbox改为未选择，未选择的checkbox改为已选择">反选</button>
									<button type="button" class="am-btn am-btn-warning" title="点击后提交已选择数据的value值" id="submitBtn">提交已选择数据</button>
								</td>
							</tr>
						</tbody>
					</table>
					<div>
						<p id="aaa"></p>
						<p>${pair }</p>
					</div>
			  </div>
			</section>
		</div>
		<script src="static/js/jquery-1.12.4.min.js"></script>
         <script src="static/js/amazeui.js"></script>

<script type="text/javascript">

$(function(){
	var cc = $('input:checkbox');
	var checkes = document.getElementsByName('checkid');
	
	
	$('#quanxuan').click(function(){
		
		$(cc).each(function () {
			console.log(cc);
				 $(this).prop("checked", true);
			 }); 
			/*  for (var i = 0; i < checkes.length; i++) {
				 var c = checkes[i];
					c.checked=true;
				} */
		     
	});
	
$('#buxuan').click(function(){
		
	$(cc).each(function () {
		
		 $(this).prop("checked", false);
	 });
	 
	 
	/*  for (var i = 0; i < checkes.length; i++) {
		 var c = checkes[i];
			c.checked=false;
		}*/
	}); 
	
	
$('#fanxuan').click(function(){
	
	 $(cc).each(function () {
        if($(this).prop('checked')) {
        	$(this).prop("checked", false);
        }else{
        	$(this).prop("checked", true);
        }
     });
});
	
	$('#shuanxin').click(function(){
		
		location.reload();
	});
	
	
	var checkes = document.getElementsByName('checkid');
	
	$('#submitBtn').click(function(){
		
		var count = 0;
		var checkes = document.getElementsByName('checkid');
			
			for (var i = 0; i < checkes.length; i++) {
				var c = checkes[i];
				if (c.checked) {
					count++
				}
			}
			
			if (count>0) {
				var form = document.forms['loginForm'];
				form.submit();
			}else{
				$('#aaa').html('请先选择数据');
			}
	});
	
});

</script>

	</body>
</html>
